<template>
	<view class="page-container">
		<view class="invite-head"
			:style="'background:url(' + baseImageUrl + '/invite/invite_bg_head@2x.png);background-size: 100% 562rpx;background-repeat: no-repeat;'">
			<view class="back iconfont icon-leftArrow" @tap="back" :style="'padding-top:' + menuBtnInfo.top + 'px'">邀请有礼
			</view>
			<view class="head-txt1">邀请越多 · 奖励越多</view>
			<view class="head-txt2" @tap.stop.prevent="toogleRuleShow">活动规则</view>
		</view>
		<view class="invite-body">
			<view class="invite-body-container">
				<view class="invite-detail"
					:style="'background:url(' + baseImageUrl + '/invite/invite_bg_task2x.png);background-size: 100% 440rpx;background-repeat: no-repeat;'">
					<view class="invite-title">
						<view class="title-txt1">做任务获得更多奖励</view>
						<view class="title-txt2" v-if="false">奖励详情</view>
					</view>
					<block v-for="(item, index) in configs" :key="index">
						<view class="invite-detail-step">
							<view class="step-num">邀{{ item.inviteNum }}人</view>
							<view class="step-info">
								<view class="info-img">
									<image :src="baseImageUrl + '/invite/invite_goldbean@2x.png'"
										style="width: 88rpx; height: 88rpx" lazy-load></image>
								</view>
								<view class="line-dashes" v-if="configs.length - 1 != index"></view>
								<view class="info-gift">
									<view class="gift-name">{{ item.giftpackName }}</view>
									<view class="gift-detail">{{ item.stu }}</view>
									<view class="gift-btn1" v-if="item.inviteeType == 1">已获得</view>
									<view class="gift-btn2" v-if="item.inviteeType == 0">待解锁</view>
									<block v-if="item.inviteeType == 2">
										<view class="left-num">
											<view class="left-avatar"
												:style="'width:' + (item.inviteeInfo.length + 1) * 26 + 'rpx'">
												<view class="avatar" :style="'left:' + index * 26 + 'rpx'"
													v-for="(item, index1) in item.inviteeInfo" :key="index1">
													<image class="avatar-img" :src="item.inviteeLogo"></image>
												</view>
											</view>
											<view class="leftnum">
												<view class="leftnum-head">
													<image :src="baseImageUrl + '/invite/invite_ic_people@2x.png'"
														style="width: 32rpx; height: 32rpx" lazy-load></image>
												</view>
												<view class="leftnum-txt">{{ item.str }}</view>
											</view>
										</view>
										<navigator url="/pages/invite/inviteeList/inviteeList" class="toFriendList"
											hover-class="none">
											你有
											<text style="color: red; font-weight: bold">{{ count }}</text>
											个好友已助力，去看看
											<text class="arrow iconfont icon-rightArrow"></text>
										</navigator>
									</block>
								</view>
								<view class="gift-img" @tap.stop.prevent="toGiftDetail" :data-info="item">
									<image :src="baseImageUrl + '/invite/invite_step_' + index + '@2x.png'"
										style="width: 128rpx; height: 128rpx" lazy-load></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="gift-friend">
				<view class="gift-friend-title">
					<view class="friend-title-img">
						<image :src="baseImageUrl + '/invite/invite_title@2x.png'" style="width: 320rpx; height: 66rpx"
							lazy-load></image>
					</view>
					<view class="friend-title-txt">好友可获奖励</view>
				</view>
				<view class="gift-friend-info">
					<view class="friend-info-img" @tap.stop.prevent="toGiftDetail" :data-info="award">
						<image :src="baseImageUrl + '/invite/invite_redbag2@2x.png'"
							style="width: 184rpx; height: 180rpx" lazy-load></image>
					</view>
					<view class="friend-info-detail">
						<view class="info-detail-name">{{ award.giftpackName }}</view>
						<view class="info-detail-content">
							{{ award.stu }}
						</view>
					</view>
				</view>
			</view>

			<view class="share-container">
				<view class="share-btn">
					<!-- #ifdef H5 -->
					<button @tap="handleShare" class="btn-invite">立即邀请</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="btn-invite">立即邀请</button>
					<!-- #endif -->
					<!-- <button catchtap="toRegist" class="btn-invite" wx:if="{{authed == '0'}}">立即邀请</button> -->
					<image :src="util.attachedUrl(icon2, baseUrl)" style="width: 30rpx; height: 30rpx"
						class="btn-invite-icon1" lazy-load></image>
					<image :src="util.attachedUrl(icon2, baseUrl)" style="width: 30rpx; height: 30rpx"
						class="btn-invite-icon2" lazy-load></image>
				</view>
				<view class="ecode iconfont icon-erweima" @tap="getQrCode">当面扫码</view>
			</view>
		</view>

		<u-popup :show="qrcodeShow" @close="onClose"
			custom-style="width:100%;border-radius:24rpx;background:rgba(0,0,0,0);"
			mode="center">
			<view style="width: 100%; height: 60rpx"></view>
			<view class="qrcode-info">
				<view class="user-info">
					<image class="user-photo" :src="inviteActivity.inviter.headImg" lazy-load></image>
					<text class="user-name">{{ inviteActivity.inviter.nickName }}</text>
					<text>{{ util.phoneHidden(inviteActivity.inviter.phone) }}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<image v-if="null != inviteActivity" class="code-img" :src="util.attachedUrl(miniappCodePath, baseUrl)"
					lazy-load></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<!-- #ifdef H5 -->
				<image v-if="null != inviteActivity" class="code-img" :src="miniappCodePath"></image>
				<!-- #endif -->
				<!-- #endif -->
				<view class="qrcode-tips">
					<text>用微信扫二维码，邀请好友</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="actRuleShow" @close="onClose"
			custom-style="width:100%;border-radius:24rpx;background:rgba(0,0,0,0);"
			mode="center">
			<view class="act-rule">
				<view class="rule-container">
					<view class="rule-title">
						<text>活动规则</text>
					</view>
					<view class="rule-content">
						<view class="rule-item">
							<text class="rule-no">1.</text>
							<text>活动时间：2022-01-01 至 2023-01-01；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">2.</text>
							<text>{{ 1 == inviteActivity.inviteSucFlag ? '被邀请人注册成功即算邀请成功' : '被邀请人注册成功且下单支付成功后才算邀请成功' }}；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">3.</text>
							<text>本着邀请越多、奖励越多的原则，分为多个邀请阶段，点击每阶段礼包入口可查看具体奖励内容；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">4.</text>
							<text>在活动周期内邀请人数达到相应等级时，会发放对应的奖励礼品，积分和优惠券会自动发放，达标后可至“我的”页面查看；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">5.</text>
							<text>请确保已注册并成功登陆，以便礼品正常发放；</text>
						</view>
						<view class="rule-item">
							<text class="rule-no">6.</text>
							<text>最终解释权归银行平台所有；</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	const app = getApp();

	const util = require('./../../../utils/util.js');
	import {
		http
	} from '@/utils/commonRequest.js';
	// #ifdef H5
	import {wechantShare} from '@/static/h5/js/wechatSdk.js'
	// #endif
	import {baseDomain} from '@/utils/constant.js'
	import QRCode from '@/utils/weapp-qrcode.js'

	export default {
		components: {},
		data() {
			return {
				baseImageUrl: app.globalData.baseImageUrl,
				imgUrl: app.globalData.baseImageUrl + '/static/pages/invite/invite/share.png',
				icon1: '/static/pages/invite/invite/attached/image/miniapp/invite/icon-1.png',
				icon2: '/static/pages/invite/invite/attached/image/miniapp/invite/icon-2.png',
				baseUrl: app.globalData.baseurl,
				miniAppid: app.globalData.appid,
				giftpackList: [],
				award: {
					giftpackName: '',
					stu: ''
				},
				configs: '',
				menuBtnInfo: {
					top: ''
				},
				count: '',
				giftpackId: '',
				activityId: '',
				inviterId: '',
				flag: false,
				actRuleShow: false,
				inviteActivity: {
					inviter: {
						headImg: '',
						nickName: ''
					},

					inviteSucFlag: 0
				},
				qrcodeShow: false,
				authed: null,
				miniappCodePath: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef MP-WEIXIN
			let menuBtnInfo = uni.getMenuButtonBoundingClientRect();
			this.menuBtnInfo = menuBtnInfo
			// #endif
			this.$checkAuth().then((res) => {
				this.getAwardList();
			});
		},
		onShow: function() {
			this.$checkAuth().then((res) => {
				this.getAwardList();
			});
		},
		/** 分享 */
		onShareAppMessage: function() {
			let that = this;
			return {
				title: '邀请有礼分享',
				imageUrl: that.imgUrl,
				path: '/pages/invite/inviteShare/inviteShare?inviterId=' + that.inviterId
			};
		},
		methods: {
			/** 邀请奖励列表数据 */
			getAwardList: function() {
				http.get('inviteWithGift/getInviteActivity')
					.then((res) => {
						res = res.data
						console.log(res);

						if (res.code == '200') {
							let configs = res.inviteActivity.configs;
							configs.forEach((v) => {
								if (v.inviteeInfo && v.inviteeInfo.length > 3) {
									v.inviteeInfo.length = 3;
								}
							});
							this.inviteActivity = res.inviteActivity
							this.award = res.inviteActivity.award
							this.configs = configs
							this.count = res.inviteActivity.count
							this.giftpackId = res.inviteActivity.award.giftpackId
							this.activityId = res.inviteActivity.id
							this.inviterId = res.inviteActivity.inviter.id
							// #ifdef H5
							this.initWechatConfig()
							// #endif
						} else {
							util.message(res.msg, function() {
								uni.switchTab({
									url: '/pages/index/index'
								});
							});
						}
					})
					.catch((res) => {
						console.log(res);
					});
			},

			back: function() {
				uni.navigateBack({
					delta: 1
				});
			},

			/** 判断是否注册 */
			checkAuth: function() {
				console.log('checkAuth');
				let that = this;
				return new Promise((resolve, reject) => {
					this.$checkLogin()
						.then((res) => {
							console.log(res);

							// if ('authed' == res) {
							// 	//已认证
							// 	that.setData({
							// 		authed: '1'
							// 	});
							// 	resolve(res);
							// } else {
							// 	that.setData({
							// 		authed: '0'
							// 	});
							// }
							that.authed = '1'
							resolve(res)
						})
						.catch((err) => {
							that.authed = '0'
							reject(err);
						});
				});
			},

			/** 登陆注册 */
			toRegist: function() {
				let that = this;

				if (that.authed == '0') {
					util.message('您还没有注册，先去注册吧', () => {
						this.$checkAuth();
					});
				}
			},

			/** 规则显示 */
			toogleRuleShow: function() {
				this.actRuleShow = !this.actRuleShow
			},

			onClose: function() {
				this.qrcodeShow = false
				this.actRuleShow = false
			},

			getQrCode: function() {
				let that = this;

				if (that.authed == '0') {
					util.message('您还没有注册，先去注册吧', () => {
						app.globalData.checkAuth();
					});
				} else {
					that.getWxACodeImgNotAuthPlat();
				}
			},

			/** 跳转礼包详情页 */
			toGiftDetail: function(e) {
				let that = this;
				let id = e.currentTarget.dataset.info.giftpackId;
				console.log(id);
				uni.navigateTo({
					url: '/subPackages/lottery/pages/giftPkgDetail/giftPkgDetail?id=' + id + '&from=invite'
				});
			},

			/**
			 * 生成分享的小程序码
			 */
			getWxACodeImgNotAuthPlat: function() {
				let that = this;

				if (!util.isEmpty(this.miniappCodePath)) {
					this.qrcodeShow = true
					return;
				}

				let scene = this.inviterId;

				if (util.isEmpty(scene)) {
					util.message('未获取到邀请人信息');
					return;
				}

				// #ifdef MP-WEIXIN
				let param = {
					scene: this.inviterId,
					miniAppid: this.miniAppid,
					pageUrl: 'pages/invite/inviteShare/inviteShare',
					envVersion: uni.getAccountInfoSync().miniProgram.envVersion,
				};
				util.showLoading('加载中');
				http.get('miniapp/getWxACodeImgNotAuthPlat', {
						params: param
					})
					.then((res) => {
						res = res.data
						console.log(res);

						if (200 == res.code) {
							that.miniappCodePath = res.miniappCodePath
							that.qrcodeShow = true
						} else {
							util.message(res.msg);
						}
						util.hideLoading();
					})
					.catch((res) => {
						util.hideLoading();
						console.log(res);
					});
				// #endif
				// #ifdef H5
				let imgData = QRCode.drawImg(baseDomain + '/pages/invite/inviteShare/inviteShare?inviterId=' + this.inviterId, {
				  typeNumber: 4,
				  // 密度
				  errorCorrectLevel: 'L',
				  // 纠错等级
				  size: 800 // 白色边框
				});
				this.miniappCodePath = imgData
				that.qrcodeShow = true
				// #endif
			},
			initWechatConfig: function() {
				let url = baseDomain + '/pages/invite/inviteShare/inviteShare?inviterId=' + this.inviterId
				wechantShare('邀请有礼分享', '', url, this.imgUrl)
			},
			handleShare: function() {
				util.message('点击右上角按钮进行分享');
			}
		}
	};
</script>
<style>

	.page-container {
		height: 100%;
		background-color: #fff;
	}

	.back {
		position: absolute;
		font-size: 34rpx;
		color: #000;
		top: 0;
		left: 34rpx;
		z-index: 99;
		font-weight: 500;
	}

	.back::before {
		margin-right: 26rpx;
	}

	.invite-head {
		height: 562rpx;
		background: linear-gradient(233deg, #6b422f 0%, #935b42 30%, #794c38 41%, #774a37 52%, #391f15 100%);
	}

	.head-txt1 {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #ffd6b0;
		padding-top: 294rpx;
		margin-left: 48rpx;
	}

	.head-txt2 {
		width: 168rpx;
		height: 58rpx;
		background: linear-gradient(180deg, #ffe1b2 0%, #a55e29 100%);
		line-height: 58rpx;
		text-align: center;
		font-size: 28rpx;
		color: #864c00;
		letter-spacing: 2rpx;
		font-weight: 600;
		margin-top: 78rpx;
		margin-left: 48rpx;
		border-radius: 8rpx;
	}

	.invite-body {
		background-color: #f8f7f3;
		border-radius: 32rpx;
		position: relative;
		bottom: 30rpx;
		padding: 24rpx;
	}

	.invite-body-container {
		width: 100%;
		background: linear-gradient(113deg, #feedda 0%, #ffe0c6 100%);
		border-radius: 24rpx;
	}

	.invite-detail {
		width: 100%;
		border-radius: 24rpx;
		padding: 30rpx 24rpx 18rpx;
		position: relative;
	}

	.invite-title {
		display: flex;
		justify-content: space-between;
	}

	.title-txt1 {
		font-size: 32rpx;
		height: 44rpx;
		line-height: 44rpx;
		font-weight: 500;
		color: #a16f6f;
	}

	.title-txt2 {
		width: 146rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		background-color: #ffd5d5;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #ed171f;
	}

	.invite-detail-step {
		background-color: rgba(255, 247, 246, 1);
		border-radius: 24rpx;
		margin-top: 46rpx;
		position: relative;
	}

	.step-num {
		width: 112rpx;
		height: 46rpx;
		line-height: 46rpx;
		background-color: #ffd69f;
		border-radius: 0 20rpx 0 20rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(255, 225, 25, 0.5);
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		text-align: center;
		font-size: 26rpx;
		color: #73101f;
		font-weight: 500;
	}

	.step-info {
		display: flex;
		padding: 40rpx 16rpx 26rpx 26rpx;
	}

	.info-img {
		width: 88rpx;
		height: 88rpx;
		position: relative;
		z-index: 100;
	}

	.line-dashes::after {
		height: 190rpx;
		width: 3rpx;
		display: block;
		content: '';
		position: absolute;
		top: 102rpx;
		left: 60rpx;
		background: linear-gradient(180deg, rgba(255, 225, 165, 1), rgba(255, 197, 99, 1) 6rpx, transparent 0rpx, transparent);
		background-size: 100% 20rpx;
		z-index: 99;
	}

	.info-gift {
		margin-left: 30rpx;
		width: 380rpx;
	}

	.gift-name {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #522d2d;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.gift-detail {
		line-height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999;
		margin-bottom: 16rpx;
	}

	.left-num {
		display: flex;
		position: relative;
	}

	.toFriendList {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.arrow {
		font-size: 24rpx;
		margin-left: 8rpx;
		font-weight: bold;
	}

	.avatar {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		border: 1px solid #fff;
		display: flex;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.avatar-img {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}

	.leftnum {
		display: flex;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 230, 230, 1);
		margin-left: 10rpx;
		padding-right: 20rpx;
	}

	.leftnum-head {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		flex-shrink: 0;
		line-height: 48rpx;
		padding-top: 6rpx;
		text-align: center;
		border-radius: 50%;
		background-color: rgba(255, 202, 202, 1);
		margin-right: 8rpx;
		color: rgba(237, 23, 31, 1);
		font-size: 24rpx;
	}

	.leftnum-txt {
		color: rgba(237, 23, 31, 1);
		font-size: 24rpx;
		display: inline-block;
		height: 48rpx;
		line-height: 48rpx;
		vertical-align: top;
	}

	.gift-btn1 {
		width: 112rpx;
		height: 48rpx;
		line-height: 48rpx;
		border: 1px solid #ff5642;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #ff5642;
		font-weight: 400;
		text-align: center;
	}

	.gift-btn2 {
		width: 112rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #fff;
		background-color: #ff5642;
		font-weight: 400;
		text-align: center;
	}

	.gift-img {
		width: 128rpx;
		height: 128rpx;
		float: right;
	}

	.gift-friend {
		width: 100%;
		height: 358rpx;
		background: linear-gradient(180deg, rgba(248, 209, 191, 0.4) 0%, rgba(238, 164, 139, 0.4) 100%);
		border-radius: 26rpx;
		margin: 48rpx 0 226rpx;
	}

	.gift-friend-title {
		width: 100%;
		height: 66rpx;
		position: relative;
	}

	.friend-title-img {
		width: 320rpx;
		height: 66rpx;
		margin: 0 auto;
		position: relative;
		top: -20rpx;
		left: 0;
	}

	.friend-title-txt {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #260b0c;
		position: absolute;
		top: -20rpx;
		left: 0;
	}

	.gift-friend-info {
		width: 650rpx;
		height: 246rpx;
		margin: 0rpx auto 48rpx;
		background-color: #fff7f6;
		display: flex;
		border-radius: 24rpx;
		padding: 40rpx 32rpx 26rpx 38rpx;
	}

	.friend-info-img {
		width: 184rpx;
		height: 180rpx;
		flex-shrink: 0;
		margin-right: 44rpx;
	}

	.friend-info-detail {
		padding-top: 22rpx;
	}

	.info-detail-name {
		font-size: 32rpx;
		color: #552d2d;
		font-weight: 600;
		line-height: 44rpx;
	}

	.info-detail-content {
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		margin-top: 8rpx;
	}

	.share-container {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #fff 100%);
	}

	.share-btn {
		position: relative;
	}

	.btn-invite {
		width: 80% !important;
		font-size: 32rpx;
		color: #fff;
		margin: 72rpx auto 24rpx;
		background: linear-gradient(180deg, #ff7663 0%, #fd5864 100%);
		box-shadow: 0 4rpx 8rpx 0 rgba(228, 169, 169, 0.5);
		border-radius: 58rpx;
		letter-spacing: 0.46rpx;
	}

	.btn-invite-icon1 {
		position: absolute;
		top: 24rpx;
		left: 232rpx;
	}

	.btn-invite-icon2 {
		position: absolute;
		top: 24rpx;
		right: 232rpx;
	}

	.ecode {
		margin: 0 auto;
		font-size: 32rpx;
		color: #5d392c;
		text-align: center;
		padding-bottom: 30rpx;
		opacity: 0.8;
		font-weight: 500;
	}

	.ecode::before {
		margin-right: 16rpx;
	}

	/*阴影背景*/

	.shadow-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 199;
	}

	.qrcode-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hide {
		display: none;
	}

	u-popup {
		position: relative;
		z-index: 999;
	}

	.qrcode-info {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 0 20rpx 20rpx;
		width: 670rpx;
		height: 765rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		position: relative;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		width: 100%;
		height: 180rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #333;
		position: absolute;
		top: -60rpx;
		left: 0;
	}

	.user-name {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.user-info image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #eee;
		flex-shrink: 0;
	}

	.code-img {
		width: 360rpx;
		height: 360rpx;
		background-color: #eee;
		margin-top: 230rpx;
		flex-shrink: 0;
	}

	.qrcode-tips {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 120rpx;
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333;
	}

	.share {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.forbid-scroll {
		overflow: hidden;
		height: 100%;
	}

	.forbid-scroll body {
		overflow: hidden;
		height: 100%;
	}

	.act-rule {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		width: 640rpx;
		background: linear-gradient(141deg, #ffc996 0%, #fc4c2c 100%);
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.rule-container {
		background-color: #fff;
		padding: 20rpx;
		height: 100%;
		width: 100%;
		border-radius: 16rpx;
	}

	.rule-title {
		padding-bottom: 20rpx;
		text-align: center;
	}

	.rule-content {
		font-size: 30rpx;
	}

	.rule-item {
		display: flex;
		padding-bottom: 10rpx;
	}

	.rule-item text {
		line-height: 45rpx;
	}

	.rule-no {
		padding-right: 5rpx;
	}
</style>
